<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <title>25 - 拟真开关 (HTML+CSS)</title>

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <label class="switch">
    <input type="checkbox" checked>

    <div class="button">
      <!-- 中间灯光 -->
      <div class="light"></div>
      <!-- 中间排列的小圆点 -->
      <div class="dots"></div>
      <!-- 开关字符 1 0 -->
      <div class="characters"></div>
      <!-- 亮反光区域 -->
      <div class="shine"></div>
      <!-- 暗阴影区域 -->
      <div class="shadow"></div>
    </div>
  </label>

</body>

</html>